import styled from 'styled-components'
import { px2rem } from '@/assets/global-style'

export const Wrapper = styled.div`
    .adm-capsule-tabs-tab-active {
    color: #000;
    background-color: #fade31;
    }
    .adm-capsule-tabs-tab {
    position: relative;
    padding: ${px2rem(8)} ${px2rem(12)};
    margin: 0 auto;
    border-radius: ${px2rem(20)};
    cursor: pointer;
    font-size: ${px2rem(14)};;
    text-align: center;
    white-space: nowrap;
    }
    .ranklike_list{
        width: 100%;
        float: left;
        margin:0 auto;
        .item-left {
            width: 48%;
            height: ${px2rem(280)};
            .left {
              margin-top: 1px;
              width: 100%;
              height:${px2rem(210)};
              border-top-left-radius: 2.4vw;
              border-top-right-radius: 2.4vw;
            }
        }
        .item-right {
            width:48%; 
            height: ${px2rem(300)};
            margin-left: 51%;
            margin-top: ${px2rem(-280)};
            .right {
                width:100%;
                height: ${px2rem(150)};
                border-top-left-radius: 2.4vw;
                border-top-right-radius: 2.4vw;
            }
        }
    }
    .topic-title {
        margin:${px2rem(5)} auto;
        padding: 0 ${px2rem(2)};
        color: #0f131a;
        font-size: ${px2rem(14)};
        line-height: ${px2rem(18)};
        font-weight: 600;
    }
    .item-subTags {
    position: absolute;
    top: ${px2rem(-213)};
    color:#fff;
    font-size: ${px2rem(12)};
    line-height:6.4vw ;
    left: 0;
    height: 6.4vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 1.6vw;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 1.6vw;
    background-color: rgba(15,19,26,.7);
    z-index: 12;
    }
    .item-subTags-left {
     position: absolute;
    top: ${px2rem(-255)};
    color:#fff;
    font-size: ${px2rem(12)};
    line-height:6.4vw ;
    left: 0;
    height: 6.4vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 1.6vw;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 1.6vw;
    background-color: rgba(15,19,26,.7);
    z-index: 12;
    }
    .like-bottom {
        position: relative;
        margin-top: ${px2rem(4)};
        flex-direction: row;
        .like-icon {
            width:  ${px2rem(15)};
            height:  ${px2rem(15)};
            border-radius: 2vw;
            object-fit: cover;
        }
        .topic-user-name {
        position: absolute;
        top:1px;
        color: #5c5f66;
        margin-left: ${px2rem(15)};
        font-size:${px2rem(13)};
        transform: scale(0.9);
        height: ${px2rem(48)};
        line-height:${px2rem(13)};
        max-width: ${px2rem(100)};
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }
        .like-num-container {
            position: absolute;
            top: 0;
            right:${px2rem(3)}; 
            flex-direction: row;
            img {
                width: ${px2rem(13)};
                height:${px2rem(13)};
                object-fit: contain;
            }
            .like-num {
                margin-left:${px2rem(16)};
                margin-top:${px2rem(-18)};
                color: #919499;
                font-size: ${px2rem(12)};
                height: ${px2rem(12)};
                transform-origin:  0 0;
                transform: scale(0.9);
            }
        }
        .like-title {
            color: rgb(255, 115, 0);
            font-size: ${px2rem(13)};
            margin-bottom: ${px2rem(4)};
        }
        .like-labels {
            width: ${px2rem(60)};
            color: rgb(255, 115, 0);
            font-size: ${px2rem(12)};
            margin-right: 0vw;
            border: 1px solid rgb(255, 115, 0);
        }
        .like-price {
            position: relative;
            margin-top: ${px2rem(4)};
            .price {
                color: rgb(255, 115, 0);
                font-size: ${px2rem(14)};

            }
            .num {
                color: #919499;
                font-size: ${px2rem(12)};
                margin-left:${px2rem(4)}; 
                transform: scale(0.7);
            }
        }
    }
`